<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../VueJs/vue.js"></script>
    <script src="../VueJs/dayjs.min.js"></script>
</head>

<body>
    <!-- 
        过滤器：
			定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）（复杂用计算属性或其他的）。
			语法：
					1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
					2.使用过滤器：{{ xxx | 过滤器名}}  或  v-bind:属性 = "xxx | 过滤器名"
			备注：
					1.过滤器也可以接收额外参数、多个过滤器也可以串联
					2.并没有改变原本的数据, 是产生新的对应的数据
            		-->
    <div id="root">
        <h1>显示格式化后的时间</h1>

        <!-- 过滤器 -->
        <h2>{{time | timeFormat1}}</h2>

        <!--还可额外传参  传的第一个参数为time 第二个参数为'YYYY/MM/DD'   形参按位置接收 -->
        <h2>{{time | timeFormat2('YYYY/MM/DD')}}</h2>

        <!-- 多个过滤器也可以串联 -->
        <h2>{{time | timeFormat2('YYYY/MM/DD') | mySlice}}</h2>
        <!-- time传给第一个过滤器，第一个过滤器返回的结果，再作为实参传给第二个过滤器，最后第二个过滤器的返回值为整个表达式的值 -->
        <!-- time只传给第一个过滤器，不会传给后面的过滤器 -->

        <!-- 指令语法中，只有v-bind可用 -->
        <h3 :x="msg | mySliceGlobal">成都信息工程大学</h3>
    </div>

    <div id="demo">
        <!-- {{test | mySlice}} --><!-- 局部过滤器用不了 -->
        {{test | mySliceGlobal}}<!-- 全部过滤器可用 -->
    </div>
</body>
<script>
    Vue.config.productionTip = false;
    Vue.config.devtools = true;

    //定义全局过滤器  Vue.filter(name,callback) 原理和在原型上定义一样,然后再创建vue实例
    Vue.filter("mySliceGlobal", function (str) {
        return str.slice(0, 4);
    });


    const vm1 = new Vue({
        el: '#root',
        data: {
            time: Date.now(),
            msg: "mimi,hello"
        },
        //写在这里面的都为局部过滤器，只供这个vm使用，另外一个vue实例用不了
        filters: {
            timeFormat1: function (val) {
                return dayjs(val).format('YYYY-MM-DD HH:mm:ss');
            },
            //若没传val2用默认值
            timeFormat2: function (val1, val2 = 'YYYY-MM-DD HH:mm:ss') {
                return dayjs(val1).format(val2);
            },
            mySlice: function (str) {
                return str.slice(0, 4);
            }
        }
    });

    const vm2 = new Vue({
        el: '#demo',
        data: {
            test: '123345'
        }

    });
</script>

</html>